---
type: tutorial
title: Ajoutez du contenu dynamique à la page "À propos de moi"
description: |-
  Tutoriel : Construisez votre premier blog Astro —
  Utilisez des variables et un rendu conditionnel sur vos pages Astro
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Maintenant que vous avez un site web multi-pages avec du contenu HTML, ajoutons un peu de HTML dynamique !

<PreCheck>
  - Définir le titre de votre page dans le frontmatter, et l'utiliser dans votre HTML
  - Afficher conditionnellement des éléments HTML
  - Ajouter des informations vous concernant
</PreCheck>

N'importe quel fichier HTML est valide en tant que langage Astro. Mais, vous pouvez faire plus avec Astro qu'avec un HTML classique !

## Définir et utiliser une variable

Ouvrez `about.astro`, qui devrait ressembler à ceci :

```astro title="src/pages/about.astro"
---
---
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Accueil</a>
    <a href="/about/">À propos</a>
    <a href="/blog/">Blog</a>
    <h1>À propos de moi</h1>
    <h2>... et de mon nouveau site Astro !</h2>

    <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

    <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
  </body>
</html>
```

<Steps>
1. Ajoutez la ligne de code JavaScript suivante dans le script du frontmatter, entre les **barres de code** :

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "À propos de moi";
    ---
    ```

2. Remplacez à la fois le titre statique "Astro" et "À propos de moi" dans votre HTML par la variable dynamique `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Accueil</a>
        <a href="/about/">À propos</a>
        <a href="/blog/">Blog</a>
        <h1>À propos de moi</h1>
        <h1>{pageTitle}</h1>
        <h2>... et de mon nouveau site Astro !</h2>

        <p>Je suis en train de suivre le tutoriel d'introduction d'Astro. C'est la deuxième page de mon site web, et c'est la première que j'ai construite moi-même !</p>

        <p>Ce site se mettra à jour au fur et à mesure que je compléterai davantage le tutoriel, alors revenez régulièrement voir comment se déroule mon parcours !</p>
      </body>
    </html>
    ```

3. Actualisez l'aperçu en direct de votre page `/about`.

    Le texte de votre page devrait rester le même, et le titre de la page affiché dans l'onglet de votre navigateur devrait maintenant indiquer "À propos de moi" au lieu de "Astro".

    Au lieu de taper du texte directement dans les balises HTML, vous avez simplement **défini puis utilisé une variable** dans les deux sections de votre fichier `.astro`, respectivement.

4. Utilisez le même modèle pour créer une valeur `pageTitle` à utiliser dans `index.astro` ("Page d'accueil") et `blog.astro` ("Mon blog d'apprentissage Astro"). Mettez à jour le HTML de ces pages aux deux endroits pour que le titre de la page corresponde à l'en-tête affiché sur chaque page.
</Steps>

:::note[À retenir]
- **Définissez** des variables dans votre script Astro en utilisant des expressions JavaScript ou TypeScript.
- **Utilisez** ces variables dans votre modèle Astro entre des accolades `{}` pour indiquer à Astro que vous utilisez un peu de JavaScript.
:::

## Écrire des expressions JavaScript dans Astro

<Steps>
1. Ajoutez le code JavaScript suivant à votre script du frontmatter, entre les **barres de code** :

      (Vous pouvez personnaliser le code à votre convenance, mais ce tutoriel utilisera l'exemple suivant.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];
    ---
    ```

2. Ensuite, ajoutez le code suivant à votre modèle HTML, en dessous de votre contenu existant :

    ```astro title="src/pages/about.astro"
    <p>Voici quelques faits me concernant :</p>
    <ul>
      <li>Je m'appelle {identity.firstName}.</li>
      <li>Je vis au {identity.country} et je travaille en tant que {identity.occupation}.</li>
      {identity.hobbies.length >= 2 && 
        <li>Deux de mes loisirs sont : {identity.hobbies[0]} et {identity.hobbies[1]}</li>
      } 
    </ul>
    <p>Voici mes compétences :</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[À retenir]
1. Rédiger un modèle Astro ressemble beaucoup à **rédiger du HTML**, mais vous pouvez inclure des expressions JavaScript à l'intérieur.
2. Le script du frontmatter Astro ne contient que du JavaScript.
3. Vous pouvez utiliser tous les **opérateurs logiques**, les **expressions** et les **fonctions** modernes JavaScript dans l'une ou l'autre section de votre fichier `.astro`. Mais, les accolades sont nécessaires (uniquement) dans le corps du modèle HTML.
:::

<Box icon="question-mark">

### Testez vos connaissances

1. Le frontmatter d'un fichier `.astro` est écrit en :

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. En plus du HTML, la syntaxe d'Astro vous permet d'inclure :

    <MultipleChoice>
        <Option isCorrect>Des opérateurs logiques, des expressions et des fonctions JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. Quand devez-vous écrire votre JavaScript entre des accolades ?
    <MultipleChoice>
        <Option>
          Lorsque vous n'êtes pas sûr que ce soit correct.
        </Option>
        <Option isCorrect>
          Lorsque vous êtes à l'intérieur de la section du modèle HTML d'un composant Astro.
          </Option>
        <Option>
          Entre les délimiteurs de code dans un composant Astro.
        </Option>
    </MultipleChoice>
</Box>

## Rendre des éléments de manière conditionnelle

Vous pouvez également utiliser vos variables du script pour choisir **d'afficher ou non** des éléments individuels du contenu HTML de votre `<body>`.

<Steps>
1. Ajoutez les lignes suivantes à votre script du frontmatter pour **définir des variables** :

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "À propos de moi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Rédactrice technique",
      hobbies: ["photographie", "observation des oiseaux", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Rédaction de documentation"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Ajoutez ensuite les lignes suivantes en dessous de vos paragraphes existants.

    Ensuite, vérifiez l'aperçu en direct dans l'onglet de votre navigateur pour voir ce qui est affiché sur la page :

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>Je suis heureux d'apprendre Astro !</p>}

    {finished && <p>J'ai terminé ce tutoriel !</p>}

    {goal === 3 ? <p>Mon objectif est de terminer en 3 jours.</p> : <p>Mon objectif n'est pas de 3 jours.</p>}
    ```

3. Envoyez vos modifications sur GitHub avant de passer à la suite. Faites-le à chaque fois que vous souhaitez sauvegarder votre travail et mettre à jour votre site web en direct.
</Steps>

:::tip
La syntaxe de templating d'Astro ressemble à la syntaxe JSX. Si vous vous demandez comment utiliser votre script dans votre HTML, alors chercher comment cela se fait en JSX est probablement un bon point de départ !
:::



<Box icon="question-mark">

### Analysez le modèle

Étant donné le script Astro suivant :

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "bottes";
const student = false;
---
```


Pour chaque expression du modèle Astro suivante, pouvez-vous prédire le HTML (le cas échéant !) qui sera envoyé au navigateur ? Cliquez pour révéler si vous avez raison !

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>Je suis encore à l'école.</p>}`

    <p>
      <Spoiler>Rien ne s'affichera car `student` évalue à faux.</Spoiler>
    </p>

3.  `<p>J'ai {quantity + 8} paires de {footwear}</p>`

    <p>
      <Spoiler>`<p>J'ai 11 paires de bottes</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>J'utilise un Mac.</p> : <p>Je n'utilise pas un Mac.</p>}`

    <p>
      <Spoiler>`<p>Je n'utilise pas un Mac.</p>`</Spoiler>
    </p>
</Box>


<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je peux définir des valeurs dans des fichiers `.astro` et les utiliser.
- [ ] Je peux rendre conditionnellement des éléments HTML.
</Checklist>
</Box>


### Ressources

- [Expressions dynamiques dans Astro](/fr/basics/astro-syntax/#expressions-type-jsx)
